﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>US Counties</title>

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <style type="text/css">
        .counties {
            fill: rgba(128, 128, 128, 0.7);
            stroke: rgba(256, 256, 256, 0.7);
            stroke-width: .5px;
            stroke-linejoin: round;
        }

            .counties:hover {
                fill: rgba(255, 0, 0, 0.5);
            }
    </style>
</head>
<body onload="getMap()">
    <div id="myMap"></div>

    <script type="text/javascript">
        var map, d3MapTools, countiesLayer, counties;

        function getMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'YOUR_BING_MAPS_KEY',
                center: new Microsoft.Maps.Location(52, -115),
                zoom: 4
            });

            //Register and load the D3 Overlay Module
            Microsoft.Maps.registerModule("D3OverlayModule", "scripts/D3OverlayManager.js");
            Microsoft.Maps.loadModule("D3OverlayModule", {
                callback: loadCounties
            });            
        }

        function loadCounties() {
            d3MapTools = new D3OverlayManager(map);
            countiesLayer = d3MapTools.addLayer({
                loaded: function (svg, projection) {
                    //Add the counties to the svg layer.
                    d3.json('data/US_States_Counties_TopoJson.js', function (error, topology) {
                        var topoData = topojson.feature(topology, topology.objects.counties).features;

                        counties = svg.selectAll('path')
                            .data(topoData)
                          .enter().append('path')
                            .attr('class', 'counties')
                            .attr('d', projection)
                        .on('click', function (feature) {
                            alert('Clicked on county id: ' + feature.id);
                        });
                    });
                }
            });
        }
    </script>
</body>
</html>
